<template>
    <!--贴吧的设置置顶页面-->
    <div>
        <!--标题-->
        <el-row>
            <el-col class="center">
                <h1>{{barName}} 吧</h1>
            </el-col>
        </el-row>

        <!--页头-->
        <el-row class="page_head">
            <el-col>
                <el-page-header @back="goBack" content="置顶管理"></el-page-header>
            </el-col>
        </el-row>

        <!--置顶帖子-->
        <el-row>
            <el-col>
                <div class="little_title_orange margin_top_8 margin_bottom_18">【 置顶帖子 】 ：</div>
                <!--置顶帖子表格-->
                <el-table
                        class="table_border"
                        :data="barTopPosts"
                        tooltip-effect="light"
                        row-class-name="success-row">
                    <el-table-column
                            label="行"
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            label="帖子编号"
                            prop="id"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            label="标题"
                            width="150"
                            :show-overflow-tooltip="true"
                            prop="title">
                    </el-table-column>
                    <el-table-column
                            label="内容"
                            width="275"
                            :show-overflow-tooltip="true"
                            prop="pure_content">
                    </el-table-column>
                    <el-table-column
                            label="发表时间"
                            width="115"
                            prop="sdfTime"
                    >
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 5px">{{ scope.row.sdfTime }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="发表人昵称"
                            :show-overflow-tooltip="true"
                            width="100"
                            prop="user.nickName">
                    </el-table-column>
                    <el-table-column
                            label="浏览量"
                            prop="viewNum"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            label="回复数"
                            width="80"
                            prop="totalReplyNum">
                    </el-table-column>
                    <el-table-column
                            label="置顶时间"
                            width="145"
                            prop="setTopTime">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            header-align="center"
                            align="right">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="toPostIndex(scope.row.id)">帖子详情</el-button>
                            <el-button
                                    v-if="scope.row.setTopTime == null"
                                    size="mini"
                                    type="success"
                                    @click="setTopPost(scope.row.id, 1, scope.$index)">置顶帖子</el-button>
                            <el-button
                                    v-else
                                    size="mini"
                                    type="warning"
                                    @click="setTopPost(scope.row.id, 0, scope.$index, 'topPosts')">取消置顶</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!--贴吧帖子（考虑到帖子数量，分页处理）-->
        <el-row>
            <el-col >
                <div class="little_title_blue margin_bottom_18 margin_top_40">【 贴吧帖子 】 ：</div>

                <!--帖子表格-->
                <el-table
                        @sort-change="changeSort"
                        tooltip-effect="light"
                        border
                        :data="barPostList"
                        :row-class-name="setBarPostsTableRowClassName"
                        class="table_border">
                    <el-table-column
                            label="行"
                            type="index"
                            :index="pageSize * (currentPage-1) + 1"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            label="帖子编号"
                            prop="id"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            label="标题"
                            width="150"
                            :show-overflow-tooltip="true"
                            prop="title">
                    </el-table-column>
                    <el-table-column
                            label="内容"
                            width="275"
                            :show-overflow-tooltip="true"
                            prop="pure_content">
                    </el-table-column>
                    <el-table-column
                            label="发表时间"
                            width="115"
                            sortable="custom"
                            :sort-orders="sortOrder"
                            prop="sdfTime"
                            >
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 5px">{{ scope.row.sdfTime }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="发表人昵称"
                            :show-overflow-tooltip="true"
                            width="100"
                            prop="user.nickName">
                    </el-table-column>
                    <el-table-column
                            label="浏览量"
                            prop="viewNum"
                            sortable="custom"
                            :sort-orders="sortOrder"
                            width="90">
                    </el-table-column>
                    <!--这里的置顶管理暂时不用显示 点赞数-->
<!--                    <el-table-column-->
<!--                            label="点赞数"-->
<!--                            width="80"-->
<!--                            prop="sbcNum">-->
<!--                    </el-table-column>-->
                    <el-table-column
                            label="回复数"
                            width="90"
                            sortable="custom"
                            :sort-orders="sortOrder"
                            prop="totalReplyNum">
                    </el-table-column>
                    <el-table-column
                            :resizable="false"
                            align="right">
                        <template slot="header" slot-scope="// eslint-disable-next-line vue/no-unused-vars
                                                            scope">
                            <el-select size="mini" v-model="searchType" placeholder="请选择" value="" style="width: 100px">
                                <el-option
                                        v-for="item in searchOpt"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            <el-input
                                    style="width: 160px"
                                    v-model="searchWd"
                                    size="mini"
                                    placeholder="输入关键字搜索"/>
                            <el-button class="margin_left_10" @click="doSearch" type="primary" size="mini" icon="el-icon-search" circle></el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="toPostIndex(scope.row.id)">帖子详情</el-button>
                            <el-button
                                    v-if="scope.row.setTopTime == null"
                                    size="mini"
                                    type="success"
                                    @click="setTopPost(scope.row.id, 1, scope.$index)">置顶帖子</el-button>
                            <el-button
                                    v-else
                                    size="mini"
                                    type="warning"
                                    @click="setTopPost(scope.row.id, 0, scope.$index, 'barPosts')">取消置顶</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-row class="margin_top_20 center">
                    <el-col>
                        <el-pagination
                                @current-change="updateListWithPage"
                                :current-page.sync="currentPage"
                                :page-size="pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="totalRs">
                        </el-pagination>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <br><br><br>
    </div>
</template>

<script>
    export default {
        name: "setTopPostsAdmin",
        data(){
            return{
                // 测试数据
                tableData: [{
                    id: '610',
                    title: '我是帖子标题',
                    // pure_content: '像风吹过八千里，不问归期。',
                    pure_content: '像风吹过八千里，不问归期。你说爱情仅此而已，谁还没有一丝委屈，不再关心我的世界下了雨。像风吹过八千里，',
                    pbTime: '2022-4-12',
                    unname: '浩浩',
                    viewNum: '611',
                    sbcNum: '612',
                    totalReplyNum: '613',
                }, {
                    id: '620',
                    title: '我是帖子标题',
                    pure_content: '像风吹过八千里，不问归期。',
                    // pure_content: '像风吹过八千里，不问归期。你说爱情仅此而已，谁还没有一丝委屈，不再关心我的世界下了雨。像风吹过八千里，',
                    pbTime: '2022-4-12',
                    unname: '浩浩',
                    viewNum: '611',
                    sbcNum: '612',
                    totalReplyNum: '613',
                }, {
                    id: '630',
                    title: '我是帖子标题',
                    pure_content: '像风吹过八千里，不问归期。',
                    // pure_content: '像风吹过八千里，不问归期。你说爱情仅此而已，谁还没有一丝委屈，不再关心我的世界下了雨。像风吹过八千里，',
                    pbTime: '2022-4-12',
                    unname: '浩浩',
                    viewNum: '611',
                    sbcNum: '612',
                    totalReplyNum: '613',
                }, {
                    id: '640',
                    title: '我是帖子标题',
                    pure_content: '像风吹过八千里，不问归期。',
                    // pure_content: '像风吹过八千里，不问归期。你说爱情仅此而已，谁还没有一丝委屈，不再关心我的世界下了雨。像风吹过八千里，',
                    pbTime: '2022-4-12',
                    unname: '浩浩',
                    viewNum: '611',
                    sbcNum: '612',
                    totalReplyNum: '613',
                }],
                barPostList: [], // 贴吧帖子（包括置顶）
                barTopPosts: [], // 贴吧置顶帖子 （按照置顶时间倒序排序）
                searchWd: '',  // 贴吧帖子 搜索关键字
                searchType: '0',  // 根据  0帖子编号 还是 1帖子标题 搜索
                searchOpt: [{   // 搜索 选项
                    value: '0',
                    label: '帖子编号'
                }, {
                    value: '1',
                    label: '帖子标题'
                }],
                // sortOrder: ['ascending', 'descending', null],
                sortOrder: [ 'descending'],  // 只有倒序

                barId: 0, // 当前管理的贴吧 id
                barName: '全兽出击- 浩浩吧', // 当前管理的贴吧  name
                totalRs: 0, // 搜索结果总的条目数
                pageSize: 10,  // 页大小， 默认为 10
                currentPage: 1, //当前页，默认为 1
                sortType: 'time', // 排序方式  默认为 根据最新时间 排序
            }
        },
        created(){
            // 接收参数（贴吧id）
            this.barId = this.$route.query.barId;
            this.barName = this.$route.query.barName;

            // 初始化当前贴吧置顶帖子
            this.getTopPostsByBar();

            // 初始化  贴吧帖子  总数
            this.getTotalNum();

            // 初始化贴吧帖子
            this.getPostList(1); // 默认加载第一页
        },
        mounted(){

        },
        methods:{

            setBarPostsTableRowClassName({rowIndex}) {
                if (this.barPostList[rowIndex].setTopTime != null) {
                    return 'success-row';
                }
                return '';
            },

            /*顶部的返回 页头 点击返回时返回到 贴吧管理页面 */
            goBack() {
                /*这里的 name 是 index.js 里的 设置的路由 name*/
                this.$router.push({name: "postBarAdmin"});
            },

            // changeSort(column, prop, order){
            changeSort(sortItem){
                // console.log("column:" + sortItem.column + "  prop:" + sortItem.prop + "  order:" + sortItem.order);
                // console.log(sortItem);
                console.log(sortItem.prop);
                switch (sortItem.prop) {
                    case 'totalReplyNum':
                        this.sortType = 'reply';
                        break;
                    case 'viewNum':
                        this.sortType = 'view';
                        break;
                    case 'sdfTime':
                        this.sortType = 'time';
                        break;
                    default:
                        this.$notify.error({
                            title: '错误',
                            message: '未知参数错误 -- changeSort'
                        });
                        return;
                }

                // 重新获取帖子列表 （这个方法默认从 data中读取 你的排序方式）
                this.getPostList(1); // 默认加载第一页
            },

            // 点击 页码 触发， 参数为 按下的页
            updateListWithPage(index){
                this.getPostList(index);
            },

            // 点击 表头的 搜索按钮触发
            doSearch(){
                // 如果是按照帖子编号搜索， 先判断输入的是否为数字
                if (this.searchType === '0'){
                    if (!(this.isNumber(this.searchWd))){
                        this.$alert("按照帖子编号进行搜索时，请输入一个数字！", '错误', {
                            confirmButtonText: '确定',
                            type: 'error',
                        });
                        return;
                    }
                }
                // 重新获取帖子列表 （这个方法默认从 data中读取 你输入的搜索关键字）
                this.getPostList(1); // 默认加载第一页

                // 重新获取结果总数
                this.getTotalNum();
            },

            /*判断是否为 数字， 如果是 返回 true ， 否则返回false*/
            isNumber(str){
                if (str !== null && str !== ''){
                    for (let i = 0; i < str.length; i++){
                        if(str.charAt(i) < '0' || str.charAt(i) > '9'){
                            return false;
                        }
                    }
                }
                return true;
            },

            /*设置帖子 贴吧置顶（或取消置顶）*/
            // postId 要置顶的帖子id, operateType = 1  操作类型： 1置顶  0取消置顶，默认为1, index 当前操作贴吧帖子在data数组中的下标索引（用于成功操作后的一些ui修改）
            // from 来自置顶帖子"topPosts"  还是贴吧帖子"barPosts"
            setTopPost(postId, operateType = 1, index, from = "barPosts"){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.postSetTop + "?postId=" + postId + "&type=" + operateType).then(req=>{
                    if (req.data !== '') {
                        if (req.data.result_code === 200) { /*成功操作*/
                            this.$message({
                                message: req.data.msg,
                                type: 'success'
                            });

                            /*根据不同的操作进行一些不同的 成功结果操作*/
                            if (operateType === 1){ // 置顶帖子。 原来 置顶帖子按钮设置为 取消置顶
                                let now = new Date();
                                this.barPostList[index].setTopTime = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
                                                                    + ' ' + now.getHours() + ':' + now.getMinutes() + ":" + now.getSeconds();
                                // console.log("time:" + this.barPostList[index].setTopTime); // time:Wed Apr 13 2022 21:25:17 GMT+0800 (中国标准时间)

                                // 将当前帖子信息 加入到 barTopPosts 头部（你当前设置置顶的永远是最后置顶的）
                                this.barTopPosts.splice(0, 0, this.barPostList[index]);
                            }else if (operateType === 0){  // 取消置顶， 原来 取消置顶 按钮 设置为 置顶帖子 按钮
                                let barPostIndex, topPostIndex;

                                // 如果来自 置顶帖子 则将置顶帖子中对应的帖子从中删除
                                if (from === 'topPosts'){
                                    topPostIndex = index;

                                    let postId = this.barTopPosts[topPostIndex].id;
                                    for (let i = 0; i < this.barPostList.length; i++) {
                                        if (postId === this.barPostList[i].id){
                                            barPostIndex = i;
                                        }
                                    }
                                }else { // 来自贴吧帖子
                                    barPostIndex = index;

                                    let postId = this.barPostList[index].id;
                                    for (let j = 0; j < this.barTopPosts.length; j++) {
                                        if (postId === this.barTopPosts[j].id){
                                            topPostIndex = j;
                                        }
                                    }
                                }

                                // 无论来自哪， 都要将贴吧帖子中对应的记录  设置为 置顶帖子, 将置顶帖子中的对应条目删除。
                                this.barPostList[barPostIndex].setTopTime = null;
                                this.barTopPosts.splice(topPostIndex, 1); //  从 index 处删除一个元素
                            }
                        } else {
                            this.$message({
                                duration: 0,  //  不会自动关闭
                                showClose: true,
                                message: req.data.msg + "错误码： " + req.data.result_code,
                                type: 'error'
                            });
                        }
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '糟糕，服务器出事了。。',
                            duration: 0,   /*出错则设置为不自动关闭*/
                        });
                    }
                })
            },

            // 向后端请求帖子列表
            // getPostList(barId, index, pageSize, sortType, searchWord, searchType){
            getPostList(index){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.postByBar + "?barId=" + this.barId
                    + "&pageSize=" + this.pageSize
                    + "&index=" + index
                    + "&pageSize=" + this.pageSize
                    + "&word=" + this.searchWd
                    + "&searchType=" + this.searchType
                    + "&sortType=" + this.sortType
                    ).then(req=>{
                    if (req.data !== ""){
                        if (req.data.rs.result_code === 200){ //后台成功获取帖子列表信息
                            // 处理帖子发表时间信息
                            let postList = req.data.list;

                            for (let i = 0; i < postList.length; i++){
                                let pbTime = new Date(postList[i].pbTime);
                                postList[i].sdfTime = pbTime.getFullYear() + '-' + (pbTime.getMonth() + 1) + '-' + pbTime.getDate();
                            }

                            this.barPostList = postList;
                        }else{ // 后台查询发生异常
                            this.$notify.error({
                                title: '错误 - ' + req.data.rs.result_code,
                                message: req.data.rs.msg
                            });
                        }
                    }else {
                        this.$notify.error({
                            title: '服务器错误',
                            message: '糟糕，获取贴吧帖子列表出错了！'
                        });
                    }
                });
            },

            // 向后端请求当前贴吧 置顶的帖子列表（按照置顶时间倒序排序）
            getTopPostsByBar(){
                // 同下，后者是把 参数封在 config里，也可以直接传空参数  params:{}
                // this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.postGetTop + "?barId=" + this.barId).then(req=>{
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.postGetTop, {params:{barId: this.barId}}).then(req=>{
                    if (req.data !== ""){
                        if (req.data.rs.result_code === 200){ //后台成功获取帖子列表信息
                            // 处理帖子时间信息
                            let postList = req.data.list;

                            for (let i = 0; i < postList.length; i++){
                                // 帖子发表时间
                                let pbTime = new Date(postList[i].pbTime);
                                postList[i].sdfTime = pbTime.getFullYear() + '-' + (pbTime.getMonth() + 1) + '-' + pbTime.getDate();

                                // 置顶时间
                                let setTopTime = new Date(postList[i].setTopTime);
                                postList[i].setTopTime = setTopTime.getFullYear() + '-' + (setTopTime.getMonth() + 1) + '-' + setTopTime.getDate()
                                                        + ' ' + setTopTime.getHours() + ':' + setTopTime.getMinutes() + ":" + setTopTime.getSeconds();
                            }

                            this.barTopPosts = postList;
                        }else{ // 后台查询发生异常
                            this.$notify.error({
                                title: '错误 - ' + req.data.rs.result_code,
                                message: req.data.rs.msg
                            });
                        }
                    }else {
                        this.$notify.error({
                            title: '服务器错误',
                            message: '糟糕，获取贴吧帖子列表出错了！'
                        });
                    }
                });
            },

            // 向后端请求  符合条件的 帖子总数（搜索类型、搜索关键字、贴吧id）
            getTotalNum(){
                let getNumUrl = this.GLOBAL.serverBaseUrl + this.GLOBAL.postTotalNum;

                // 无论是否进行搜索 无论是否针对某个用户 先把参数传过去，在后端进行值的判断
                getNumUrl += "?word=" + this.searchWd; // 默认为 “” 空字符串
                getNumUrl += "&searchType=" + this.searchType;
                getNumUrl += "&barId=" + this.barId;

                this.$http.get(getNumUrl).then(req=>{
                    this.totalRs = req.data;
                });
            },

            /*以新标签页的方式 打开帖子详情页面*/
            toPostIndex(pid){
                // console.log(pid);
                let routeUrl = this.$router.resolve({
                    path: "/postInfo",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {pid: pid},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.role 来接收参数
                });

                //以新标签页的方式打开
                window.open(routeUrl.href, "_blank");
            }
        }
    }
</script>

<style scoped>
    /* xxx 吧 标题*/
    h1{
        font-size: 27px;
    }

    /*页头  返回 - 置顶管理*/
    .page_head{
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .table_border{
        border-radius: 20px;
        border: 2px solid #E4E7ED;
    }

</style>